{% extends "base.html" %}
{% load i18n %}
{% block title %} Tu Negocio Empresarios - Agregar Productos al Inventario Desde Un Archivo{% endblock %}

{% block head-css-ext %}
    <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/layout.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/jquery-ui.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/ui.datepicker.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/jquery.autocomplete.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/forms.css" media="screen" />
{% endblock %}

{% block head-js-ext %}
    <!-- jQuery -->
    <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.js"></script>
    <script type="text/javascript" src="{{MEDIA_URL}}js/jquery-ui.js"></script>
    <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.ui.datepicker-es.js"></script>
    <!--[if IE]><script type="text/javascript" src="{{MEDIA_URL}}js/jquery.bgiframe.js"></script><![endif]-->
    <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.autocomplete.js"></script>
{% endblock %}

{% block head-js-embedded %}
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function(){
            var year = new Date().getFullYear();
      
            $("button, input:submit, input:file, input:reset", ".enviar").button();
      
            $("#datepicker").datepicker({
                firstDay: 0,
                dateFormat: 'yy-mm-dd',
                yearRange: '1900' + ':' + year, 
                changeMonth: true,
                changeYear: true,
                showOn: 'button',
                buttonImage: '{{MEDIA_URL}}img/calendar.gif',
                buttonImageOnly: true,
                showButtonPanel: true,
                maxDate : new Date()
            });
    
            $('#productos').autocomplete("{% url buscarproducto %}", {
                multiple: true,
                dataType: 'json',                    
                width: 300, 
                parse: function(data){
                    return $.map (data, function(row) {
                        return {
                            data: row,                                      
                            result: row[0]
                        }
                    });
                }
            }).result(function(event, data, formatted) {
                $('#productos').val(data[0]);
            });
            
            $("input:reset").click(function(){
                location.href = "{% url inventario %}" 
            });
            
        });
    </script>
{% endblock %}

{% block content-box1 %}
    <h>Configure su archivo excel como lo muestra la imagen
    <img src="{{MEDIA_URL}}img/help.png" alt="" width="328" height="122" class="image-left" />
	<br><br><br>
    <form method="post" action="." enctype="multipart/form-data" >{% csrf_token %}
        <table>
            <tr>
                <td><label for="id_import_file">Archivo :</label>{% if form.import_file.errors %} <div class="error">{{ form.import_file.errors|join:", " }}</div>{% endif %}</td>
                <td><div class="enviar">{{ form.import_file }}</div></td>		
            </tr>
            <tr>
                <td></td>
                <td align="center" >
                    <table>
                        <tr class="enviar">
                            <td><input type="submit" value="Cargar Archivo"/></td>    
                            <td><input type="reset"  value="Cancelar"></td>
                        </tr>
                    </table>
                </td>
            </tr>	  
        </table>
    </form>
{% endblock %}